import 'package:abc/controller/coin_recharge_controller.dart';
import 'package:abc/page/coin_record_page.dart'; // 添加金币记录页面导入
import 'package:abc/view/CustomAppBar.dart';
import 'package:abc/view/GradientButton.dart';
import 'package:abc/view/PaymentMethodSheet.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CoinRechargePage extends GetView<CoinRechargeController> {
  const CoinRechargePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!Get.isRegistered<CoinRechargeController>()) {
      Get.lazyPut(() => CoinRechargeController());
    }
    return Scaffold(
      backgroundColor: const Color(0xFF0E0F26),
      body: Stack(
        children: [
          Column(
            children: [
              // 顶部导航栏 (返回按钮和标题)
              CustomAppBar(
                title: "金币充值",
                onBack: () {
                  Get.back();
                },
                rightText: "金币记录", // 添加右上角金币记录按钮
                onRightTextTap: () {
                  Get.to(() => const CoinRecordPage()); // 跳转到金币记录页面
                },
              ),

              // 可滚动的内容区域
              Expanded(
                child: SingleChildScrollView(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildBalanceCard(), // 金币余额卡片
                      SizedBox(height: 10),
                      _buildRechargeSelection(controller), // 充值金额选择
                      SizedBox(height: 10),
                      _buildPaymentMethod(controller), // 支付方式选择
                      // SizedBox(height: 10),
                      _buildTips(), // 温馨提示
                    ],
                  ),
                ),
              ),
              _buildBottomButton(controller), // 底部"立即支付"按钮
              SizedBox(height: 18),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildBalanceCard() {
    return SizedBox(
      width: double.infinity,
      height: 136 + 42,
      child: Stack(
        children: [
          Positioned(
            top: 42,
            right: 0,
            left: 0,
            child: Image.asset(
              'assets/images/coin_recharge_card.png',
              height: 136,
            ),
          ),
          Positioned(
            right: 0,
            child: Image.asset(
              'assets/images/coin_recharge_star.png',
              height: 136,
            ),
          ),
          Positioned(
            top: 40 + 42,
            left: 20,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  '1980',
                  style: TextStyle(
                    color: Color(0xFF7D6557),
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                    height: 1,
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  '金币余额',
                  style: TextStyle(
                    color: Color(0xFF7D6557),
                    fontSize: 12,
                    height: 1,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 充值选项 Widget
  Widget _buildOption(CoinRechargeController controller, int index) {
    final option = controller.rechargeOptions[index];
    final isSelected = controller.selectedRechargeIndex == index;

    return GestureDetector(
      onTap: () => controller.selectRechargeOption(index),
      child: Container(
        width: 92, // 固定宽度
        height: 48, // 固定高度
        decoration: BoxDecoration(
          color: isSelected
              ? const Color(0xFF9C27B0).withOpacity(0.8)
              : Colors.transparent, // 紫色/深色背景
          gradient: isSelected
              ? LinearGradient(
                  colors: [Color(0xFFA877F4), Color(0xFF5650D6)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                )
              : LinearGradient(
                  colors: [Colors.transparent, Colors.transparent],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
          borderRadius: BorderRadius.circular(10.0),
          border: Border.all(
            color: isSelected ? Colors.transparent : Color(0xFFE9E9E9),
          ),
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  option['coins'],
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
                Text(
                  '金币',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                ),
              ],
            ),
            Text(
              option['price'],
              style: TextStyle(color: Colors.white, fontSize: 13),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildRechargeSelection(CoinRechargeController controller) {
    return Container(
      padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 48),
      decoration: BoxDecoration(
        color: const Color(0x33959595), // 卡片背景色
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '选择充值金额',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 40),
          Obx(
            () => Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 显示前三个选项（10, 20, 40）
                _buildOption(controller, 0),
                _buildOption(controller, 1),
                _buildOption(controller, 2),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 支付方式选项 Widget
  Widget _buildPaymentOption(CoinRechargeController controller, int index) {
    final method = controller.paymentMethods[index];
    final isSelected = controller.selectedPaymentIndex == index;

    return GestureDetector(
      onTap: () => controller.selectPaymentMethod(index),
      child: Container(
        // 外层：渐变背景（作为边框）
        margin: const EdgeInsets.only(bottom: 12.0),
        padding: EdgeInsets.all(1), // 边框粗细（数值=边框宽度）
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: isSelected
                ? [Color(0xFFA877F4), Color(0xFF5650D6)]
                : [Colors.transparent, Colors.transparent], // 渐变颜色（可多色）
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(10), // 边框圆角（与内层一致）
        ),
        // 内层：实际内容容器
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
          decoration: BoxDecoration(
            color: const Color(0xFF252836),
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Row(
            children: [
              Container(
                width: 42,
                height: 42,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Image.asset(
                  'assets/images/${method['icon']}.png',
                  width: 24,
                  height: 24,
                ),
              ),
              const SizedBox(width: 12),
              Text(
                method['name'],
                style: const TextStyle(color: Colors.white, fontSize: 15),
              ),
              const Spacer(),
              // 选中/未选中图标
              Image.asset(
                isSelected
                    ? 'assets/images/icon_selected.png'
                    : 'assets/images/icon_unselect.png',
                width: 24,
                height: 24,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPaymentMethod(CoinRechargeController controller) {
    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '支付方式',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Obx(
            () => Column(
              children: [
                _buildPaymentOption(controller, 0),
                _buildPaymentOption(controller, 1),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTips() {
    const String tipsText = """
温馨提示：
1、平台承诺，您的付款信息、会员信息完全加密，不会泄露您的任何信息，请安心支付
2、如果支付渠道无法付款，请退出后重新发起，或者切换其他付款方式
3、如遇到充值未到账，请及时联系「在线客服」未您解决
""";
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          tipsText,
          style: const TextStyle(
            color: Colors.white60,
            fontSize: 13,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  Widget _buildBottomButton(CoinRechargeController controller) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: GradientButton(
        text: "立即支付",
        onPressed: () => controller.handlePayment(),
      ),
    );
  }
}
